<template>
  <div class="home">
    <div class="home_title">
      <h3>正在热映(48部)</h3>
    </div>
    <ul id="home_movie">
      <li class="clearfix" v-for="movies in movieList" :key="movies.id" @click='toMovie(movies.id)'>
        
        <div class="home_img">
          <img :src="picFix(movies.img)" alt="">
        </div>
        <div class="home_btn clearfix">
          <!-- 标题 -->
          <h2>购票</h2>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
export default {
    name:'home',
    created(){
      this.axios.get('/ajax/movieOnInfoList').then((res)=>{
          console.log("正在热映",res);
          this.movieList = res.data.movieList;
      })
    },
    //保存数据
    data(){
      return{
        movieList:[],
      }
    },
    methods: {
      picFix(url){
        return url.replace('w.h','128.180')
      },
      toMovie(id){
        this.$router.push({name:"movie",params:{movieId:id}})
      }
    },
}
</script>

<style lang="scss" scope>
.home{
  width:100%;
  .home_title{
    height: 50px;
    margin-top: 20px;
    text-align: left;
    .h3{
      display: block;
      width:128px;
      margin-left: 30px;
    }
  }

  #home_movie{
    display: flex;
    width:100%;
    flex-wrap: wrap;
    &>li{
      display: block;
      width:150px;
      height: 200px;
      flex:1;
      .home_img{
        width:128px;
        height: 180px;
        overflow: hidden;
        margin-left: 20px;
      }
      .home_btn{
        width:128px;
        height: 40px;
        color:#E54847;
        margin-left: 20px;
      }
      &>img{
        width:120px;
      }
    }
  }
}      
</style>

